<template>
  <div class="v-work-space" :style="{height:$globalConfig.workSpaceHeight}">
    <div class="_work-space-main">
      <m-expand-box
        class="__main-left"
        :initWidth="initWidth"
        :minWidth="319"
        :draglineShow="true"
        contentClass="__left-expand-body">
        <div class="__left-tree">
          <m-sider-tab/>
        </div>
        <div class="__left-attr">
          <m-property-table />
        </div>
      </m-expand-box>
      <div class="__main-right">
        <m-graph-tab />
      </div>
    </div>
    <m-footer/>

  </div>
</template>

<script>
import SiderTab from 'components/SiderTab';
import Footer from 'components/Footer';
import PropertyTable from 'components/Attribute/PropertyTable';
import GraphTab from 'components/GraphTabs/GraphTab';
import ExpandBox from 'components/common/ExpandableBox';

export default {
  name: 'work-space',
  components: {
    'm-property-table': PropertyTable,
    'm-sider-tab': SiderTab,
    'm-expand-box': ExpandBox,
    'm-graph-tab': GraphTab,
    'm-footer': Footer
  },

  data() {
    return {
      collapsed: false,
      backupState: ''
    };
  },
  computed: {
    showSimulation() {
      return this.$store.state.mbse.showSimulation;
    },
    initWidth(){
      return window.screen.width > 1440 ? 338 : 320;
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.v-work-space {
  width: 100%;
  overflow: hidden;
  ._work-space-main {
    height: calc(100% - 30px);
    width: 100%;
    overflow: hidden;
    //// display: flex;
    flex-direction: row;
    .__main-left {
      flex: 0 0 auto;
      float: left;
      //// width: 419px;
      /deep/ ._drag-line {
        background:  #B1CEE2;
        //// border-left: 1px solid #b1cee2;
        //// border-right: 1px solid #b1cee2;
        //// border-top: 1px solid #b1cee2;
        width: 2px;
        right: -2px;
      }
      /deep/ .__left-expand-body {
        display: flex;
        flex-direction: column;
        //// width: 419px !important;
      }

      /deep/ .ant-tabs {
        width: 100% !important;
        height: 100% !important;

        .ant-tabs-nav-container {
          height: 28px !important;
        }
        .ant-tabs-content {
          /*background: orange;*/
          height: calc(100% - 30px) !important;
          overflow: hidden;
        }
      }
      .__left-tree {
        overflow: hidden;
        flex: 4;
        height: 100px !important;
        background-color: white !important;
      }
      .__left-attr {
        background-color: #efefef !important;
        overflow: hidden;
        flex: 2;
        height: 100px !important;
      }
    }
    .__main-right {
      flex: 1 1 auto;
      //// width: 1000px;
      overflow: hidden;
      height: 100%;
      border-top:1px solid #b1cee2;
    }
  }

}
</style>
